@use "../../../assets/scss/mixins/figure/graph" as mx;
html {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  &:before,
  &:after {
    box-sizing: inherit;
  }
}
body {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  font-family: sans-serif;
}

.avatar {
  position: relative;
  margin: 100px auto 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(to bottom, #e18989, #de3030);
  border-radius: 50%;
  margin-bottom: 30px;
  animation-name: faceChange;
  &,
  .mouth,
  .eye.left,
  .eye.right {
    animation-duration: 1s;
    animation-delay: var(--progress);
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-play-state: paused;
  }
  .eye {
    position: absolute;
    width: 20%;
    height: 20%;
    border-radius: 50%;
    background-color: #fff;
    top: 30%;
    left: 50%;
    margin-left: -10%;
    &.left {
      transform: translateX(-90%);
      animation-name: leftEyeChange;
    }
    &.right {
      transform: translateX(90%);
      animation-name: rightEyeChange;
    }
  }
  .mouth {
    --w: 32px;
    --h: 32px;
    position: absolute;
    opacity: 0;
    width: var(--w);
    height: var(--h);
    top: 66px;
    left: 30%;
    border-radius: var(--w);
    animation-name: mouthChange;
    transform: translateY(calc(var(--h) / 2));
  }
}

input[type="range"] {
  width: 200px;
  margin: 0 auto;
  display: block;
}

@keyframes leftEyeChange {
  0% {
    clip-path: polygon(0 75%, 100% 0, 100% 100%, 0 100%);
  }
  50%,
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes rightEyeChange {
  0% {
    clip-path: polygon(0 0, 100% 75%, 100% 100%, 0 100%);
  }
  50%,
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes mouthChange {
  50% {
    height: 4px;
    box-shadow: inset 0 4px 0 #fff;
    transform: translateY(calc(var(--h) / -3));
    clip-path: inset(0 0 0 0);
    opacity: 0;
  }
  50.1% {
    height: 4px;
    box-shadow: inset 0 -4px 0 #fff;
    transform: translateY(calc(var(--h) / -3));
    clip-path: inset(50% 0 0 0);
    opacity: 0.03;
  }
  100% {
    height: var(--h);
    box-shadow: inset 0 -50px 0 #fff;
    transform: translateY(calc(var(--h) / -1));
    clip-path: inset(50% 0 0 0);
    opacity: 1;
  }
}
@keyframes faceChange {
  from {
    background: linear-gradient(to bottom, #e18989, #de3030);
  }
  to {
    background: linear-gradient(to bottom, #6459df, #3b28cd);
  }
}

.eight {
  margin: 50px auto;
  @include mx.eightDiagrams;
}
